import { memo, useState } from "react";
import type { FC, ReactNode } from "react";
import { MenuOutlined, UserOutlined } from "@ant-design/icons";
import { navList, productParamData, productParamData2, productParamData3 } from "./data";
// import { Col, Row } from "antd";
import MySwiper from "./components/MySwiper";

interface IProps {
	children?: ReactNode;
}
const Home: FC<IProps> = () => {
	// const [activeIndex, setActiveIndex] = useState(0);
	// const [colorIndex, setColorIndex] = useState(0);
	const [activeWheels, setActiveWheels] = useState(0);
	const [activeWheels2, setActiveWheels2] = useState(0);
	const [activeWheels3, setActiveWheels3] = useState(0);
	const [activeIndex, setActiveIndex] = useState(0);

	// 切换车身颜色
	// const changeColor = (id: number) => {
	// 	setColorIndex(id);
	// };

	// 切换车轮
	const changeWheels = (id: number, type: number) => {
		switch (type) {
			case 0:
				setActiveWheels(id);
				break;
			case 1:
				setActiveWheels2(id);
				break;
			case 2:
				setActiveWheels3(id);
				break;
			default:
				break;
		}
	};

	return (
		<div className="relative h-full px-30px py-30px font-r bg-[#eeeff2]">
			{/* 头部 */}
			<div className="flex-between mb-30px">
				<div>
					<MenuOutlined />
					<span className="ml-5px text-12px">菜单</span>
				</div>
				<h1 className="text-18px font-b">提供奥创光子产品专业报价服务</h1>
				{/* <h1 className="text-18px font-b">Porsche</h1> */}
				<div>
					<UserOutlined className="text-14px" />
				</div>
			</div>

			{/* <h2 className="text-20px font-b">718 Cayman Style Edition</h2> */}

			{/* 展示区域 */}
			<div className="flex justify-end">
				{/* 左边 */}
				<div className="sticky top-10px h-730px left-0px w-1000px">
					{/* tab */}
					<div className="flex-between text-14px">
						<ul className="flex mt-10px">
							{navList.map(item => (
								<li
									className={`
                    mr-20px font-m line-height-22px cursor-pointer
                    ${activeIndex === item.id ? "border-solid border-b-1.5px" : ""}
                  `}
									onClick={() => setActiveIndex(item.id)}
								>
									{item.name}
								</li>
							))}
						</ul>
						<span className="font-r">总览</span>
					</div>

					{/* swiper */}
					<MySwiper
						index={0}
						activeWheels={activeWheels}
						activeWheels2={activeWheels2}
						activeWheels3={activeWheels3}
					/>
				</div>

				{/* 右边 */}
				<div className="w-350px ml-20px">
					<div className="flex-between">
						<h2 className="line-height-32px text-14px">产品规格</h2>
						<h3 className="flex relative">
							<span className="absolute top--30px right-0 text-16px font-b text-18px">
								¥{60000 + activeWheels * 500 + activeWheels2 * 1000 + activeWheels3 * 1000}
							</span>
							<span>经销商报价</span>
						</h3>
					</div>
					{/* <div className="mt-22px p-15px bg-[#d3e1ff] rounded-4px font-14px">
						由于全球供应链的限制和高需求的结合，我们的许多汽车供不应求，因此目前所有保时捷新车型的等待时间都比平时长很多。
					</div> */}
					{/* 车身颜色 */}
					{/* <div className="mt-20px mb-20px p-15px bg-white rounded-4px">
						<h2 className="text-25px mb-15px">车身颜色</h2>
						<Row gutter={25}>
							{colorList.map(item => (
								<Col key={item.id} span={12} className="flex flex-col mb-8px">
									<div
										className={`
                      h-44px w-140px mb-10px rounded-4px p-3px box-border
                      ${
												colorIndex === item.id
													? "border-solid border-2px border-[#000] rounded-4px"
													: ""
											}
                    `}
										onClick={() => changeColor(item.id)}
									>
										<div
											style={{ backgroundColor: item.color }}
											className={`
                        w-full
                        h-full rounded-4px
                      `}
										></div>
									</div>
									<span>{item.colorName}</span>
								</Col>
							))}
						</Row>
					</div> */}
					{/* 车轮选配 */}
					{/* <div className="mb-50px p-15px bg-white rounded-4px">
						<h2 className="text-25px mb-15px">车轮</h2>
						<div className="flex-between">
							{wheelsList.map(item => (
								<div
									className={`
                  w-146px h-146px flex-center border-solid border-2px border-[#d8d8db] rounded-8px
                  ${item.id === activeWheels && "!border-[#000]"}
                `}
									onClick={() => changeWheels(item.id)}
								>
									<img src={item.url} className="w-83px object-contain" />
								</div>
							))}
						</div>
					</div> */}
					<div className="mb-50px p-15px bg-white rounded-4px">
						<h2 className="text-25px mb-15px">中心波长 {productParamData[activeWheels].name}</h2>
						<div className="flex-between">
							{productParamData.map(item => (
								<div
									className={`
                  cursor-pointer w-80px h-40px flex-center border-solid border-2px border-[#d8d8db] rounded-8px
                  ${item.id === activeWheels && "!border-[#000]"}
                `}
									onClick={() => changeWheels(item.id, 0)}
								>
									<span>{item.name}</span>
								</div>
							))}
						</div>
					</div>
					<div className="mb-50px p-15px bg-white rounded-4px">
						<h2 className="text-25px mb-15px">平均功率 {productParamData2[activeWheels2].name}</h2>
						<div className="flex-between">
							{productParamData2.map(item => (
								<div
									className={`
                  cursor-pointer w-80px h-40px flex-center border-solid border-2px border-[#d8d8db] rounded-8px bg-white text-black
                  ${item.id === activeWheels2 && "!bg-black text-white"}
                `}
									onClick={() => changeWheels(item.id, 1)}
								>
									<span>{item.name}</span>
								</div>
							))}
						</div>
					</div>
					<div className="mb-50px p-15px bg-white rounded-4px">
						<h2 className="text-25px mb-15px">
							单脉冲能量 {productParamData3[activeWheels3].name}
						</h2>
						<div className="flex-between">
							{productParamData3.map(item => (
								<div
									className={`
                  cursor-pointer w-60px h-40px flex-center border-solid border-2px border-[#d8d8db] rounded-8px
                  ${item.id === activeWheels3 && "!border-[#000]"}
                `}
									onClick={() => changeWheels(item.id, 2)}
								>
									<span>{item.name}</span>
								</div>
							))}
						</div>
					</div>
					{[
						"重复频率",
						"脉宽",
						"光束质量",
						"偏振特性",
						"功率波动",
						"冷却方式",
						"激光器尺寸",
						"脉冲串"
					]
						.slice(0, 3)
						.map((item, index) => (
							<div key={index} className="mb-50px p-15px bg-white rounded-4px">
								<h2 className="text-25px mb-15px">{item}</h2>
							</div>
						))}
				</div>
			</div>
		</div>
	);
};

export default memo(Home);
